<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gulp.js - 基于流的自动化构建工具。 | gulp.js 中文网</title>
    <link rel="icon" href="img/gulp.jpg" type="image/png">

    <style type="text/css">
        body {
            margin: 0;
        }

        .clear {
            clear: both;
        }

        .font-weight-normal {
            font-weight: normal;
            /*-webkit-margin-before: 0;*/
            /*-webkit-margin-after: 0;*/
        }

        .top {
            background: #c14f4b;
        }

        .header {
            /*position: fixed;*/
            margin: 0 400px;
            padding-top: 20px;
        }

        .div-logo {
            float: left;
        }

        .logo {
            color: antiquewhite;
            text-decoration: none;
        }

        .logo:hover {
            color: white;
        }

        .nav-right {
            float: right;
        }

        .nav-item {
            margin: 0 20px;
            float: left;
        }

        .nav-item > a {
            color: antiquewhite;
            font-size: 14px;
            text-decoration: none;
        }

        .nav-item > a:hover {
            color: white;
        }

        .poster {
            margin: 0 auto;
            text-align: center;
        }

        .poster > img {
            margin: 100px 0 0;
            padding: 0;
        }

        .poster > p {
            font-size: 20px;
            color: white;
            font-weight: bold;
        }

        .btn-border {
            font-size: 18px;
            color: antiquewhite;
            text-decoration: none;
            border: 1.5px solid antiquewhite;
            padding: 5px 8px;
            margin-top: 20px;
            margin-bottom: 35px;
            display: inline-block;
        }

        .btn-border:hover {
            color: white;
            border-color: white;
        }

        .content {
            background: white;
            padding-top: 50px;
            margin: 0 400px;
        }

        .content-item-left {
            width: 500px;
            float: left;
        }

        .content-item-left > p {
            font-size: 18px;
        }

        .content-item-right {
            width: 500px;
            float: right;
        }

        .content-item-right > p {
            font-size: 18px;
        }

        .footer {
            margin: 80px auto 0;
            text-align: center;
        }

        .footer > p {
            color: gray;
            font-size: 14px;
        }

        .footer-link {
            color: gray;
            font-size: 14px;
            text-decoration: none;
            margin: 0 5px;
        }
    </style>
</head>
<body>
<!--所有内容部分-->
<div class="main-content">
    <!--背景为红色的部分-->
    <div class="top">
        <!--头部导航栏-->
        <div class="header">
            <div class="div-logo">
                <a href="https://www.deepin.org" target="_blank" class="logo">Gulp&nbsp;中文网</a>
            </div>
            <div class="nav-right">
                <div class="nav-item">
                    <a href="http://www.deepin.org" target="_blank">首页</a>
                </div>
                <div class="nav-item">
                    <a href="http://www.deepin.org" target="_blank">中文文档</a>
                </div>
                <div class="nav-item">
                    <a href="http://www.deepin.org" target="_blank">入门指南</a>
                </div>
                <div class="nav-item">
                    <a href="http://www.deepin.org" target="_blank">API</a>
                </div>
                <div class="nav-item">
                    <a href="http://www.deepin.org" target="_blank">插件开发</a>
                </div>
                <div class="nav-item">
                    <a href="http://www.deepin.org" target="_blank">常见问题</a>
                </div>
                <div class="nav-item">
                    <a href="http://www.deepin.org" target="_blank">使用技巧</a>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <!--海报部分-->
        <div class="poster">
            <img src="img/gulp.jpg" alt="Gulp">
            <p>用自动化构建工具增强你的工作流程！</p>
            <a href="http://www.deepin.org" class="btn-border" target="_blank">开始使用</a>
        </div>
    </div>

    <!--内容部分-->
    <div class="content">
        <div class="content-item-left">
            <h1 class="font-weight-normal">易于使用</h1>
            <p>
                通过代码优于配置的策略，Gulp让简单的任务简单，复杂的任务可管理。
            </p>
        </div>
        <div class="content-item-right">
            <h1 class="font-weight-normal">构建快速</h1>
            <p>
                利用Node.js流的威力，你可以快速构建项目并减少频繁的IO操作。
            </p>
        </div>
        <div class="clear"></div>
        <div class="content-item-left">
            <h1 class="font-weight-normal">插件高质</h1>
            <p>
                Gulp严格的插件指南确保插件如你期望的那样简洁高质地工作。
            </p>
        </div>
        <div class="content-item-right">
            <h1 class="font-weight-normal">易于学习</h1>
            <p>
                通过最少的API，掌握Gulp毫不费力，构建工作尽在掌握：如同一系列流管道。
            </p>
        </div>
    </div>

    <div class="clear"></div>

    <!--底部-->
    <div class="footer">
        <p>&copy;Gulp&nbsp;中文网&nbsp;2017</p>
        <div>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">Nodejs中文文档</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">Jekyll中文网</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">Webpack中文文档</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">全栈课堂</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">91PHP</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">NPM中文文档</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">NPM中文文档</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">jQuery中文网</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">jQuery中文网</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">Grunt中文网</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">SASS中国</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">Rollup中文网</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">Tailwind CSS</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">优站精选</a>
            <a href="http://www.deepin.org" class="footer-link" target="_blank">优站精选</a>
        </div>
        <p>京ICP备11008151号|京公网安备11010802014853</p>
    </div>
</div>
</body>
</html>